<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <script src="https://unpkg.com/vue@3.4.27/dist/vue.global.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/@picocss/pico@2.0.6/css/pico.css">
    <script src="https://unpkg.com/axios@1.7.2/dist/axios.min.js"></script>
    <title>修改专业</title>
</head>

<body>
<div id="app">
    <main class="container">
        <form style="margin-top: 32px">
            <fieldset>
                <label>
                    专业名
                    <input name="name" v-model="name" />
                </label>
                <label>
                    专业号
                    <input name="code" v-model="code" />
                </label>
                <label>
                    年级
                    <input name="grade" v-model="grade"/>
                </label>
                <label>
                    备注
                    <input name="remark" v-model="remark" />
                </label>

                <!-- 学院列表供选择： 显示学院名称，取得选中学院的id -->
                <label>
                    学院
                    <select v-model="collegeId">
                        <option v-for="(item, index) in colleges" :value="item.id"> {{ item.name }}</option>
                    </select>
                </label>
            </fieldset>

            <button @click.prevent="doUpdate" :disabled="!canClick">修改</button>
            <div style="color: rgb(0, 137, 90); display: inline-block; margin-left: 24px" v-if="displaySuccess">
                操作成功，即将返回
            </div>
        </form>
    </main>
</div>

<script>
    const App = {
        data() {
            return {
                id: null,
                name: "",
                code: "",
                grade: "",
                collegeId: null,
                remark: "",

                colleges: [],								// 取回学院列表，并显示学院名称在select列表，选中某一项后，记录下学院的id

                canClick: false,							// 访问后端过程中，按钮不可用
                displaySuccess: false,                      // 操作成功后显示提示信息
            };
        },

        methods: {
            init() {
                const queryString = window.location.search;
                const urlParams = new URLSearchParams(queryString);
                const id = urlParams.get('id');

                this.canClick = false;
                const vueInstance = this;
                let finishedTasks = 0;						// 既要取得要修改的记录，还要取得学院列表

                if(id == null ) {
                    console.log("URL中没有id： ", window.location.href);
                }
                else {
                    // 取得当前要修改的记录
                    const url = "/specialities/" + id;
                    axios.get(url).then(function(response) {
                        console.log("响应的状态码：", response.status);
                        console.log("响应的数据：", JSON.stringify(response.data));

                        vueInstance.canClick = true;

                        if(response.status == 200 && response.data != null
                            && response.data.code === 200 && response.data.data.rows != null) {
                            vueInstance.id = response.data.data.rows[0].speciality.id;
                            vueInstance.name = response.data.data.rows[0].speciality.name;
                            vueInstance.code = response.data.data.rows[0].speciality.code;
                            vueInstance.grade = response.data.data.rows[0].speciality.grade;
                            vueInstance.remark = response.data.data.rows[0].speciality.remark;
                            vueInstance.collegeName = response.data.data.rows[0].college.name;
                            vueInstance.canClick = true;
                            finishedTasks++;
                            if(finishedTasks == 2) {
                                vueInstance.canClick = true;
                            }
                        }
                        else {
                            console.log("后端代码出错了，检查后端log");
                        }
                    })
                        .catch(function (error) {
                            vueInstance.canClick = true;

                            console.log("访问出错了：", error);
                            console.log("地址：", url);
                        });
                }

                // 取得学院列表，显示在select的选项中
                const url = "/colleges";
                axios.get(url).then(function(response) {
                    console.log("响应的状态码：", response.status);
                    console.log("响应的数据：", JSON.stringify(response.data));

                    if(response.status == 200 && response.data != null
                        && response.data.code === 200 && response.data.data.rows != null) {
                        vueInstance.colleges = response.data.data.rows;

                        finishedTasks++;
                        if(finishedTasks == 2) {
                            vueInstance.canClick = true;
                        }
                    }
                    else {
                        console.log("后端代码出错了，检查后端log");
                    }
                })
                    .catch(function (error) {
                        console.log("访问出错了：", error);
                        console.log("地址：", url);
                    });
            },

            doUpdate() {
                const url = "/specialities";
                const formData = {
                    id: this.id,
                    name: this.name,
                    code: this.code,
                    grade: this.grade,
                    remark: this.remark,
                    collegeId: this.collegeId,
                };

                this.canClick = false;
                let vueInstance = this;

                axios.put(url, formData).then(function(response) {
                    console.log("响应的状态码：", response.status);
                    console.log("响应的数据：", JSON.stringify(response.data));

                    if(response.status == 200 && response.data != null && response.data.code === 200) {
                        vueInstance.displaySuccess = true;

                        window.setTimeout(() => {
                            window.location.href = "/speciality-list.html";
                        }, 1000);
                    }
                    else {
                        console.log("后端代码出错了，检查后端log");
                    }
                })
                    .catch(function (error) {
                        console.log("访问出错了：", error);
                        console.log("地址：", url);
                        console.log("数据：", formData);
                    });
            }
        },
        mounted() {
            this.init();
        }
    };

    const app = Vue.createApp(App);
    app.mount("#app");
</script>
</body>
</html>